<template>
   <div class="detail-bottom">
       <div class="container">
          <div class="bot-left">
              <bot-left :prodcutName="this.name"></bot-left>
          </div>
          <div class="bot-right">
              <bot-right :summary="this.summary"></bot-right>
          </div>
       </div>
       
        
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
import BotLeft from './DetailBottmLeft.vue';
import BotRight from './DetailBottmRight.vue';
export default {
  name: 'productDetail-bottom',
  components:{
    BotLeft,
    BotRight
  },
  props:{
     
     data:Object
  },
  data () {
    return {
        name:'',
        summary:''
    }
  },
  watch:{
    data(){
        // console.log(this.data)
        this.name = this.data.category.name
        this.summary = this.data.summary
        
    }
  },
  computed:{
        ...mapState(['baseUrl'])
    },
  mounted() {
 
    
  },
  methods:{
   
  }
 
  
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
img 
    width 100%
.container
  container()  
  margin-top 20px
.bot-left
    width 300px
    float left
.bot-right 
  float right
  width 880px

</style>
